import React, { Component } from 'react'
import Button from './Button';
import Count from './Count';
import { CounterWrapper } from './countr_style'

export default class Counter extends Component {

  constructor() {
    super();
    this.state = {
      count: 0
    }
  }

  handleChange(num) {
    console.log('handleChange:', num)
    this.setState({
      count: this.state.count + num
    })
  }

  render() {
    return (
      <CounterWrapper>
        <Button change={(num) => this.handleChange(num)} bgcolor="red" type="decrement">-</Button>
        <Count count={this.state.count}></Count>
        <Button change={(num) => this.handleChange(num)} bgcolor="blue" type="increment">+</Button>
      </CounterWrapper>
    )
  }
}
